<template>
  <view class="brand-add-page">
    <view class="form-view">
      <view class="form-row">
        <view class="form-label">品牌编码</view>
        <view class="form-value code-value">
          <text class="input-pl" v-if="!form.code">系统自动生成</text>
          <text v-else>{{ form.code }}</text>
        </view>
      </view>
      <view class="form-row">
        <view class="form-label">品牌名称</view>
        <view class="form-value">
          <input
            type="text"
            placeholder="请输入品牌名称"
            placeholder-class="input-pl"
            class="form-input"
            v-model="form.title"
            required
          />
        </view>
      </view>
      <view class="form-row">
        <view class="form-label">排序</view>
        <view class="form-value">
          <input
            type="number"
            placeholder="请输入排序"
            placeholder-class="input-pl"
            class="form-input"
            v-model="form.sort"
          />
        </view>
      </view>
      <view class="form-row">
        <view class="form-label">是否显示</view>
        <view class="form-value">
          <switch
            :checked="form.enableStatus === 5"
            @change="switchChange"
            color="#fb5904"
          />
        </view>
      </view>
      <view class="form-row" @click="goSupplier">
        <view class="form-label">关联供应商</view>
        <view class="form-value supplier-value">
          <text class="input-pl" v-if="!supplierName">请选择</text>
          <text v-else>{{ supplierName }}</text>
          <text class="icon-arrow">></text>
        </view>
      </view>
      <view class="form-row">
        <view class="form-label">品牌LOGO</view>
        <view class="form-value clearfix">
          <image
            v-if="form.images"
            :src="form.images"
            mode="aspectFill"
            class="logo-img"
            @click="chooseImage"
          />
          <view v-else class="upload-btn" @click="chooseImage">
            <text>上传</text>
          </view>
        </view>
      </view>
      <view class="fixed-bottom">
        <button class="sub-btn" type="primary" @click="submitData">保存</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      brand_id: 0,
      supplierSel: [], // 改为数组，便于存储选中的供应商
      form: {
        code: "",
        images: "",
        supplier: "",
        enableStatus: 5,
        sort: "1",
        title: "",
      },
      supplierName: "",
    };
  },
  onShow() {
    // 监听供应商选择事件
    uni.$once("supplier-selected", (selected) => {
      if (selected && selected.length) {
        this.supplierSel = selected;
        this.form.supplier = selected.map((item) => item.id).join(",");
        this.supplierName = selected.map((item) => item.title).join(",");
      }
    });
    // 保持原有逻辑兼容
    if (this.supplierSel && this.supplierSel.length) {
      this.form.supplier = this.supplierSel.map((item) => item.id).join(",");
      this.supplierName = this.supplierSel.map((item) => item.title).join(",");
    }
  },
  onLoad(options) {
    if (options.id) {
      this.brand_id = options.id;
      this.getDetail();
      uni.setNavigationBarTitle({ title: "修改品牌" });
    } else {
      uni.setNavigationBarTitle({ title: "新增品牌" });
    }
  },
  methods: {
    goSupplier() {
      // 跳转到供应商选择页面，带source=2
      this.goPage("/pagesT/Purchase/Supplier?source=2");
    },
    switchChange(e) {
      this.form.enableStatus = e.detail.value ? 5 : 4;
    },
    chooseImage(e) {
      // 使用uni.chooseImage进行图片选择
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.form.images = res.tempFilePaths[0];
        },
      });
    },
    async getDetail() {
      // 使用项目接口获取品牌详情
      const { err, data } = await this.$u.api.getBrandInfoById(this.brand_id);
      if (err) return;
      this.form = {
        ...this.form,
        ...data,
      };
      this.supplierName = (data.supplierTitle || []).join(",");
    },
    async submitData() {
      // 简单校验
      if (!this.form.title) {
        uni.showToast({ title: "请输入品牌名称", icon: "none" });
        return;
      }
      if (!this.form.supplier) {
        uni.showToast({ title: "请选择关联供应商", icon: "none" });
        return;
      }
      let target = {};
      const params = {
        code: this.form.code,
        images: this.form.images,
        supplier: this.form.supplier,
        enableStatus: this.form.enableStatus,
        sort: this.form.sort,
        title: this.form.title,
      };
      uni.showLoading();
      if (this.brand_id) {
        target = await this.$u.api.editBrand(this.brand_id, params);
      } else {
        target = await this.$u.api.addBrand(params);
      }
      const { err } = target;
      uni.hideLoading();
      if (err) return;
      this.$u.toast("提交成功");
      this.goPage("/pagesB/goods/BrandManage", "redirectTo");
    },
  },
};
</script>

<style scoped>
.brand-add-page {
  padding: 24rpx 0 120rpx 0;
  background: #f7f8fa;
  min-height: 100vh;
}
.form-view {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx 8rpx 24rpx;
  margin: 24rpx;
  box-shadow: 0 2rpx 12rpx #f0f0f0;
}
.form-row {
  display: flex;
  align-items: center;
  min-height: 80rpx;
  font-size: 30rpx;
  color: #333;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 12rpx 0;
}
.form-label {
  width: 180rpx;
  color: #888;
  font-size: 28rpx;
}
.form-value {
  flex: 1;
  display: flex;
  align-items: center;
}
.code-value {
  color: #bbb;
}
.supplier-value {
  justify-content: space-between;
}
.icon-arrow {
  margin-left: 12rpx;
  color: #bbb;
}
.logo-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  background: #f5f5f5;
}
.upload-btn {
  margin-left: 0;
  background: #f5f5f5;
  color: #888;
  font-size: 28rpx;
  padding: 12rpx 32rpx;
  border-radius: 8rpx;
  border: 1rpx dashed #bbb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 24rpx 0 24rpx 0;
  box-shadow: 0 -2rpx 8rpx #f0f0f0;
  z-index: 99;
  display: flex;
  justify-content: center;
}
.sub-btn {
  width: 92%;
  background: #fb5904;
  color: #fff;
  text-align: center;
  border-radius: 12rpx;
  padding: 24rpx 0;
  font-size: 34rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
  border: none;
}
.input-pl {
  color: #bbb;
}
</style>
